<template>
  <a-tabs v-model:active-key="tab" tab-position="top" class="msg-table-wrap">
    <a-tab-pane key="unread" tab="未读">
      <msg-table v-if="tab == 'unread'" status="unread" style="width: 100%; height: 100%" />
    </a-tab-pane>
    <a-tab-pane key="read" tab="已读">
      <msg-table v-if="tab == 'read'" status="read" style="width: 100%; height: 100%" />
    </a-tab-pane>
  </a-tabs>
</template>

<script>
import MsgTable from './msg-table-list.vue';

export default {
  name: 'msg-table-wrap',
  components: { MsgTable },
  data() {
    return {
      tab: 'unread',
    };
  },
};
</script>

<style lang="less">
.msg-table-wrap {
  width: 100%;
  height: 100%;
  .ant-tabs-content {
    height: 100%;
  }
  .ant-tabs-tabpane {
    height: 100%;
  }
}
</style>
